<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JQuery是如何来操作节点</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="css/style.css">
    <script>
   
        $(function(){
 
            var $param = $('p'); //获取到p节点
            var $li = $('ul li:eq(1)');//获取到第二个li元素的节点
 
            var ps_text = $param.attr("title"); //获取P元素属性title的值
            var ul_text = $li.attr("title");
            var li_text = $li.text();
 
            alert(ps_text);
            alert(ul_text);
            alert(li_text);
// -------------------------------------------------------------------------------
            // 向第2个 ul 插入文字
            var $li1 = $('<li>这是我们新添加的一个li111</li>');
            var $li2 = $('<li>这是我们新添加的一个li222</li>');
            var $parent = $("ul:eq(1)");
            $parent.append($li1);
            $parent.append($li2);
 
        })
     </script>
</head>
<body>
    <!-- JQuery是如何来操作节点 -->
    <p title="这是一个段落标签">这是一个标签</p>
    <ul>
        <li title="Java">java</li>
        <li title="Node">node</li>
        <li title="AngularJS">angularJS</li>
    </ul>
<!-- ---------------------------------------------------------------- -->
    <ul>

    </ul>
</body>
</html>